<template>
  <div class="page">
    <x-header :left-options="{showBack: true,backText:'直播列表'}" class="headerBox"></x-header>
    <!-- tab -->
    <tab
      v-model="index"
      default-color="#686868"
      active-color="#000"
      custom-bar-width="20px"
      bar-active-color="#1F7AFF"
    >
      <tab-item selected >进行中</tab-item>
      <tab-item>未开始</tab-item>
      <tab-item >回放</tab-item>
    </tab>
    <swiper
      v-model="index"
      :show-dots="false"
      ref="cateSwiper"
      :min-moving-distance="2000"
      @on-get-height="getPageHeight">
      <swiper-item v-for="(item, index) in listContent" :key="index">
        <div class="softwareBox">
          <ul class="softwareListBox clearfix liveBox">
            <li v-for="(item2, index2) in item.softwareList" :key="index2" class="lives">
              <img :src="item2.listBg" class="listBg" />
              <img :src="item2.nameBg" class="nameBg" />
              <div class="name">{{item2.name}}老师</div>
              <img :src="item2.head" class="head" />
              <div class="states">
                <div class="state" :class="item2.liveStatus=='直播中'?'state01':item2.liveStatus=='未开始'?'state02':'state03'">
                  <img v-if="item2.liveStatus=='直播中'" :src="item2.stateImg" />
                  <img v-if="item2.liveStatus=='未开始'" :src="item2.stateImg" />
                  <img v-if="item2.liveStatus=='回放'" :src="item2.stateImg" />
                  <span >{{item2.liveStatus=='直播中'?'直播中':item2.liveStatus=='未开始'?'未开始':'回  放'}}</span>
                </div>
                <div class="studyNum">320人学习中</div>
              </div>
              <div class="courseInfos">
                <div class="courseTitle">{{item2.course}}</div>
                <div class="justify_between">
                  <div>{{item2.courseNum}}课时</div>
                  <div>
                    <img src="../assets/images/comment.png" class="comment" />评价{{item2.comment}}
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
import { Tab, TabItem, Swiper, SwiperItem, XHeader } from "vux";
export default {
  components: {
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    XHeader
  },
  data() {
    return {
      index: 0,
      // 软件列表数据
      listContent: [
        {
          softwareList: [
            {
              listBg: require('../assets/images/img01.png'),
              nameBg: require('../assets/images/bg02.png'),
              head: require('../assets/images/head02.png'),
              name: "侯晓波",
              course: "晓波老师生活口语体验课",
              courseNum: "20",
              comment: "321",
              liveStatus: '直播中',
              stateImg: require('../assets/images/icon01.png')
            },
            {
              listBg: require('../assets/images/img01.png'),
              nameBg: require('../assets/images/bg02.png'),
              head: require('../assets/images/head02.png'),
              name: "侯晓波",
              course: "晓波老师生活口语体验课",
              courseNum: "20",
              comment: "321",
              liveStatus: '直播中',
              stateImg: require('../assets/images/icon01.png')
            },
            {
              listBg: require('../assets/images/img01.png'),
              nameBg: require('../assets/images/bg02.png'),
              head: require('../assets/images/head02.png'),
              name: "侯晓波",
              course: "晓波老师生活口语体验课",
              courseNum: "20",
              comment: "321",
              liveStatus: '直播中',
              stateImg: require('../assets/images/icon01.png')
            }
          ]
        },
        {
          softwareList: [
            {
              listBg: require('../assets/images/img01.png'),
              nameBg: require('../assets/images/bg02.png'),
              head: require('../assets/images/head02.png'),
              name: "侯晓波",
              course: "晓波老师生活口语体验课",
              courseNum: "20",
              comment: "321",
              liveStatus: '未开始',
              stateImg: require('../assets/images/icon02.png')
            },
            {
              listBg: require('../assets/images/img01.png'),
              nameBg: require('../assets/images/bg02.png'),
              head: require('../assets/images/head02.png'),
              name: "侯晓波",
              course: "晓波老师生活口语体验课",
              courseNum: "20",
              comment: "321",
              liveStatus: '未开始',
              stateImg: require('../assets/images/icon02.png')
            }
          ]
        },
        {
          softwareList: [
            {
              listBg: require('../assets/images/img01.png'),
              nameBg: require('../assets/images/bg02.png'),
              head: require('../assets/images/head02.png'),
              name: "侯晓波",
              course: "晓波老师生活口语体验课",
              courseNum: "20",
              comment: "321",
              liveStatus: '回放',
              stateImg: require('../assets/images/icon03.png')
            },
            {
              listBg: require('../assets/images/img01.png'),
              nameBg: require('../assets/images/bg02.png'),
              head: require('../assets/images/head02.png'),
              name: "侯晓波",
              course: "晓波老师生活口语体验课",
              courseNum: "20",
              comment: "321",
              liveStatus: '回放',
              stateImg: require('../assets/images/icon03.png')
            },
            {
              listBg: require('../assets/images/img01.png'),
              nameBg: require('../assets/images/bg02.png'),
              head: require('../assets/images/head02.png'),
              name: "侯晓波",
              course: "晓波老师生活口语体验课",
              courseNum: "20",
              comment: "321",
              liveStatus: '回放',
              stateImg: require('../assets/images/icon03.png')
            }
          ]
        }
      ]
    };
  },
  methods: {
    // onItemClick(index) {
    //   this.index = !this.index;
    // },
    getPageHeight() {
      let topHeight = document.getElementsByClassName("vux-slider")[0]
          .offsetTop,
        diffHeight = window.screen.height - topHeight ;
      this.$nextTick(() => {
        this.$refs.cateSwiper.xheight = diffHeight + "px";
      });
      // console.log(topHeight, diffHeight, this.$refs.cateSwiper.xheight)
    }
  }
};
</script>

<style lang="less" scoped>
.page {
  background-color: #f7f8f9;
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
  }

  .liveBox {
    display: flex;
    flex-wrap: wrap;
    padding: 30px;
    .lives {
      position: relative;
      margin-bottom: 20px;
      width:48%;
      margin-right: 27px;
      list-style: none;
      .listBg {
        width: 100%;
        display: block;
      }
      .nameBg {
        width: 150px;
        height: 55px;
        position: absolute;
        top: 30px;
        left: 0;
      }
      .name {
        color: #fff;
        position: absolute;
        top: 35px;
        left: 10px;
        font-size: 24px;
      }
      .head {
        position: absolute;
        top: 25px;
        left: 140px;
        width: 56px;
        height: 56px;
        border: 1px solid #fff;
        border-radius: 50%;
      }
      .states {
        position: absolute;
        top: 180px;
        left: 10px;
        display: flex;
        .state {
          border-radius: 5px;
          position: relative;
          height: 40px;
          width: 110px;
          img {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 10px;
            left: 8px;
          }
          span {
            color: #fff;
            font-size: 24px;
            position: absolute;
            top: 0;
            left: 35px;
          }
        }
        .state01{
          background: -webkit-linear-gradient(left, #E63A83 , #FC3958); /* Safari 5.1 - 6.0 */
          background: -o-linear-gradient(right, #E63A83, #FC3958); /* Opera 11.1 - 12.0 */
          background: -moz-linear-gradient(right, #E63A83, #FC3958); /* Firefox 3.6 - 15 */
          background: linear-gradient(to right, #E63A83 , #FC3958); /* 标准的语法 */
        }
        .state02{
          background: -webkit-linear-gradient(left, #9D9D9D , #BCBCBC);
          background: -o-linear-gradient(right, #9D9D9D, #BCBCBC); 
          background: -moz-linear-gradient(right, #9D9D9D, #BCBCBC); 
          background: linear-gradient(to right, #9D9D9D , #BCBCBC); 
        }
        .state03{
          background: -webkit-linear-gradient(left, #34A0E4 , #28BBEF); 
          background: -o-linear-gradient(right, #34A0E4, #28BBEF); 
          background: -moz-linear-gradient(right, #34A0E4, #28BBEF); 
          background: linear-gradient(to right, #34A0E4 , #28BBEF); 
        }
        .studyNum {
          font-size: 24px;
          color: #fff;
          background: rgba(0, 0, 0, 0.2);
          padding-left: 2px;
          height: 40px;
          line-height: 40px;
        }
      }
      .courseInfos {
        background: #fff;
        width: 100%;
        padding: 20px 15px;
        box-sizing: border-box;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        .courseTitle {
          font-size: 24px;
          margin-bottom: 15px;
        }
        .justify_between {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .comment {
          width: 26px;
          height: 26px;
          vertical-align: middle;
          margin-right: 10px;
        }
      }
    }
    .lives:nth-child(2n) {
      margin-right: 0;
    }
  }
}

</style>